<template>
    <div class="allSpace hasFoot ">
        <HeaderNav3 :activeIndex="activeIndex"></HeaderNav3>
        <Contact></Contact>
        <Ad></Ad>
        <ul class="allSpace-item wrap">
           <li v-for="item in items">
               <router-link :to="{path:'/spaceDetails',query:{id:item.id}}">
                   <div class="img">
                       <img :src="item.more">
                   </div>
                   <div class="con">
                       <div class="title">
                           <p>
                               {{item.post_title}}
                           </p>
                       </div>
                       <div class="msg">
                           <p>
                               更新時間：{{item.published_time}}
                           </p>
                           <p>
                               <span>樓層：{{item.post_floor}}</span>
                               <span>座向：{{item.post_seat}}</span>
                           </p>
                           <p>
                               <span id="orangeText">面積：{{item.post_acreage}}尺</span>
                               <span id="orangeText">尺價：{{item.post_sell2}}</span>
                           </p>
                       </div>
                   </div>
                   <div class="price">
                        <div class="collectIcon" :class="{collectOn:item.type}" @click.prevent="collect(item)">
                        </div>
                       <div class="cost">
                           <p>
                               <span>$</span>
                                  <var>{{item.post_sell}}</var>
                               <span v-show="!item.post_class">萬</span>
                           </p>
                       </div>
                   </div>
               </router-link>
           </li>
        </ul>
        <div class="allSpace-page">
            <el-pagination
                layout="prev, pager, next"
                @current-change="handleCurrentChange"
                :total="totalCount"
               >
            </el-pagination>
        </div>
    </div>
        
</template>

<script>
import HeaderNav3 from "@/components/HeaderNav3.vue"
import Contact from '@/components/Contact.vue'
import Ad from '@/components/Ad.vue'

import { mapState } from "vuex"
import { V1_SPACE_LIST,V1_ADD_SPACE,V1_USER_SPACE} from "@/config/api"
export default {
	components:{
        Contact,
        Ad,
        HeaderNav3
	},
    computed: {
        ...mapState({
            "userProfile":state=>state.app.userProfile,
           
        }),
    },
    activated(){ 
        this.$store.commit("IS_SHOW_ALERT",true);
         if(this.$route.query.id){
           this.getData2();
        }else{
           this.getData();
        }
        // this.$store.commit("SPACE",localStorage.space);
      
    },
    methods:{
        getData(){
            this.$http.get(V1_SPACE_LIST+(this.currentPage|0)+"/"+10+"/",{
            }).then(res=>{
                if(res.data.success){
                    this.items=res.data.infor.listItems;
                    this.items.map((item) => {
                        var da = item.published_time*1000;
                        da = new Date(da);
                        var year = da.getFullYear()+'年';
                        var month = da.getMonth()+1+'月';
                        var date = da.getDate()+'日';
                        item.published_time=[year,month,date].join('');
                    })
                   this.totalCount = Math.ceil(res.data.infor.totalCount/10)*10;
                   // console.log('空間列表')
                }
            })
        },
        getData2(){
            this.$http.get(V1_USER_SPACE+(this.currentPage|0)+"/"+10+"/"+this.$route.query.id,{
            }).then(res=>{
                if(res.data.success){
                    this.items=res.data.infor.listItems;
                    this.items.map((item) => {
                        var da = item.published_time*1000;
                        da = new Date(da);
                        var year = da.getFullYear()+'年';
                        var month = da.getMonth()+1+'月';
                        var date = da.getDate()+'日';
                        item.published_time=[year,month,date].join('');
                    })
                   this.totalCount = Math.ceil(res.data.infor.totalCount/10)*10;
                   // console.log('代理空間列表')
                }
            })
        },
        handleCurrentChange(page) {
            this.currentPage = page-1;
            this.getData();
        },  
        collect(item){
            if(this.userProfile){
                // console.log(this.userProfile.token);
                // console.log(item.id);
                item.type = item.type?0:1;
                  // TODO 请求
                this.$http.put(V1_ADD_SPACE,{
                    "token":this.userProfile.token,
                    "id":item.id
                }).then(res=>{
                    if(res.data.success){
                        
                    }
                })
            }else{
                this.$alert('沒有登錄', '請先登錄', {
                    confirmButtonText: '确定',
                });
            }
        },
    },
    data(){
        return{
            "items":[],
            "totalCount":0,
             currentPage:0,
            "activeIndex":"4",
        }
    },
    mounted(){
      
       
    }
   
}
</script>
<style lang="scss">
    @import "../style/allSpace";

</style>